<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="css/dataTables.bootstrap.min.css">
    <style>
        .form-control{
            display: inline-block;
            width: 150px;
            padding: 2px 12px;
            height: 28px;
        }
        .inquire{
            width: 1200px;
            margin: 0 auto;
        }
        h4{
            font-size: 16px;
        }
        .btn{
            padding: 2px 12px;
            height: 28px;
        }
        .inputLable{
            padding-right: 5px;
        }
        .inputWrap{
            overflow: hidden;
        }
        .inputItem{
            float: left;
            margin-right: 20px;
        }
        .loadingImg{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 25px;
            height: 25px;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="inquire">
            <div class="header">
                <h4>可用探针资源查询</h4>
                <div class="inputWrap">
                    <div class="inputItem">
                        <label><span class="inputLable">探针ID:</span><input id="probe_id" class="form-control" type="text"></label>
                    </div>
                    <div class="inputItem">
                        <label><span class="inputLable">省份:</span><select  name="province" id="eprovinceName" class="form-control"><option value="">--全部--</option></select></label>
                        <label><span class="inputLable">所属地市:</span><select  name="city" id="ecityName" class="form-control"><option value="">--全部--</option></select></label>
                    </div>
                    <div class="inputItem">
                        <button type="button" class="btn btn-info inquireSubmit">查询</button>
                        <button type="button" class="btn btn-info synchronize">同步</button>
                    </div>
                </div>
                <div class="taskList">
                    <div id="dataTables">
                        <table id="task_list" class="display" width="100%"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.dataTables.min.js"></script>
<!-- <script src="js/distpicker.js"></script> -->
<script src="js/dataTables.bootstrap.min.js"></script>
<script src="../js/common/dimpt.js"></script>
<script>
    var dataTable = $('#task_list').DataTable( {
        serverSide: true,//服务器模式
        bLengthChange: false,
        searching: false,
        bProcessing : true,//加载效果
        language: {
            "sProcessing": "处理中...",
            "sLengthMenu": "显示 _MENU_ 项结果",
            "sZeroRecords": "没有匹配结果",
            "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
            "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
            "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
            "sInfoPostFix": "",
            "sSearch": "搜索:",
            "sUrl": "",
            "sEmptyTable": "表中数据为空",
            "sLoadingRecords": "载入中...",
            "sInfoThousands": ",",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "上页",
                "sNext": "下页",
                "sLast": "末页"
            },
            "oAria": {
                "sSortAscending": ": 以升序排列此列",
                "sSortDescending": ": 以降序排列此列"
            }
        },
        ajax: {
            url: CONTEXT_PATH+'/rest/probeOperationApi/getGoodProbeQuery',
            type: 'GET'
        },
        columns: [
            { title: "探针ID" },
            { title: "探针名称" },
            { title: "所属省份" },
            { title: "所属地市" },
            { title: "更新时间" }
        ],
        order: [
        ],
        columnDefs: [
            { orderable: false, targets: 0}
        ]
    });
    $("#task_list_processing").html('').append('<img class="loadingImg" src="images/loading.gif" alt="">');
    function selectCity(){
        $.ajax({
            url: CONTEXT_PATH+'/rest/probeOperationApi/getGoodProbeArea',
            type: 'POST',
            dataType: 'json',
            success: function(data){
                console.log(data)
                console.log(ecityName);
                var defaultOption = '<option value="">--全部--</option>';
                var enprovinve = '';
                data.forEach(function (item, index){
                    enprovinve += '<option value="' + item.text + '">' + item.text + '</option>';
                });
                $("#eprovinceName").append(enprovinve);
                $("#eprovinceName").change(function (){
                    var ecity = '';
                    var index = $(this).val();
                    if (index === 'all') {
                        $("#ecityName").html(defaultOption);
                        return;
                    }
                    data.forEach(function (item){
                        if (item.text == index){
                            item.children.forEach(function (ele){
                                ecity += '<option value="' + ele.text + '">' + ele.text + '</option>'; 
                            });
                        }
                    });
                    $("#ecityName").html(defaultOption).append(ecity);
                });
            }
        });
    }
    selectCity();

    $(".inquireSubmit").click(function (){
        var probe_id = $("#probe_id").val();
        var probe_province = $("#eprovinceName").val();
        var probe_city = $("#ecityName").val();
        var url = CONTEXT_PATH+'/rest/probeOperationApi/getGoodProbeQuery?' + 'probe_id=' + probe_id + '&' + 'probe_province=' + probe_province + '&' + 'probe_city=' + probe_city
        dataTable.ajax.url(url).load();
    });
    $(".synchronize").click(function (){
        var probe_id = $("#probe_id").val();
        var probe_province = $("#eprovinceName").val();
        var probe_city = $("#ecityName").val();
        $.ajax({
            url: CONTEXT_PATH+'/rest/probeTask/synchronizationByCondition',
            type: 'GET',
            //dataType: 'json',
            success: function(data){
                var url = CONTEXT_PATH+'/rest/probeOperationApi/getGoodProbeQuery?' + 'probe_id=' + probe_id + '&' + 'probe_province=' + probe_province + '&' + 'probe_city=' + probe_city
                dataTable.ajax.url(url).load();
            },
        })
        
    });
</script>
</html>